<template>
	<view style="width: 100%">
		<view class="u-page">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>

			<!-- <u-row customStyle="margin: 5px">
				<u-col span="10">
					<u-search style="z-index: 999" :disabled="true" bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
				<u-col span="2">
					<u-button type="primary" icon="scan" @click="handle_Scan_Click" size="small" shape="circle"
						text="扫码">
					</u-button>
				</u-col>
			</u-row> -->

			<view class="top" style="background-color: transparent;">
				<u-row customStyle="margin: 5px" class="search">
					<u-col span="11">
						<u-search style="z-index: 999" :disabled="true" bgColor="rgb(255 255 255)" placeholder="搜索"
							shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
					</u-col>
				</u-row>
				<view class="userInfoCreate">
					<u-row customStyle="margin: 10px" style="right:60% ;" >
						<u-col span="2" customStyle="padding-top: 1%; position: relative; right: 100%;">
							<u-button type="primary" icon="scan" @click="handle_Scan_Click" size="small" shape="circle"
								text="扫码">
							</u-button>
						</u-col>
					</u-row>
				</view>
			</view>


			<!-- <view class="top" style="background-color: transparent;">
				<u-row customStyle="margin-bottom: 10px" class="search">
					<u-col span="12">
						<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
							shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
					</u-col>
				</u-row>
				<view class="userInfoCreate" style="font-size: 30px;padding-bottom: 10px;">
					<u-row customStyle="margin: 10px" class="create">
						<u-col span="6"></u-col>
						<u-col span="3">
							<uni-icons @click="handel_plus_click" style="text-align: right;" type="plus"
								size="30"></uni-icons>
						</u-col>
					</u-row>
				</view>
			</view> -->

			<u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%; align-self: center">
					<u--form labelWidth="auto" labelPosition="left" :model="queryParams" :rules="rules" ref="form1">
						<u-form-item label="申请人姓名" prop="applyName" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none" v-model="queryParams.elderName">
							</u--input>
						</u-form-item>
						<u-form-item label="申请人身份证号码" prop="applyIdno" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none" v-model="queryParams.elderIdno">
							</u--input>
						</u-form-item>
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup>
			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<u-empty v-if="DataList.length == 0" mode="list"></u-empty>
					<u-cell-group customStyle="background-color: white;" v-else>
						<u-cell v-for="(item, index) in DataList" :key="item.id" size="large" isLink clickable
							:title="item.elderName" :label="item.endTime" :value="item.status" :name="item.id"
							@click="handel_cell_click">
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
//APP页面：改造施工申请人,
//数据库表：reform_application
//1.获取老人信息列表，下拉继续加载
//2.提供条件搜索选项
//3.点击单个老人信息跳转到老人详情
//4.新增录入老人信息
import {
	transformPostBody,
	transformRequestURL
} from "@/utils/requestParams.js";

import {
	listSlhgzresqjl,
	getSlhgzresqjl,
	delSlhgzresqjl,
	addSlhgzresqjl,
	updateSlhgzresqjl,
} from "@/api/elder/serviceApply.js";

import {
	listSlhgzsbwcqk,
	getSlhgzsbwcqk,
	delSlhgzsbwcqk,
	addSlhgzsbwcqk,
	updateSlhgzsbwcqk,
} from "@/api/elder/serviceApply_GZSG.js";

import {
	QueryRTInfoList,
	addRTInfo,
	updateRTInfo,
	getRTInfo,
	delRTInfo,
	QueryRTInfoHistory,
} from "@/api/elder/RTInfo.js";

export default {
	name: "index",
	components: {},
	data() {
		return {
			DataList: [],
			total: 0, //条目总数，用户加载更多
			queryParams: {
				pageNum: 1,
				pageSize: 15,
				searchValue: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				remark: null,
				params: {},
				id: null,
				taskId: null,
				taskTypeCode: null,
				taskTypeName: '设备安装',
				begName: null,
				begTime: null,
				serverType: null,
				serverId: null,
				serverName: null,
				elderId: null,
				elderName: null,
				elderIdno: null,
				taskProvince: null,
				taskCity: null,
				taskDistrict: null,
				taskTown: null,
				taskVillage: null,
				taskStreet: null,
				taskRegisterAdd: null,
				taskLongitude: null,
				taskLatitude: null,
				planStartTime: null,
				planEndTime: null,
				startTime: null,
				endTime: null,
				status: null,
				taskDetail: null,
				isSelfSign: null,
				elderSign: null,
				approveName: null,
				approveResult: null,
				approveOpinion: null,
				star: null,
				appraise: null,
				realLongitude: null,
				realLatitude: null,
				attribute1: null,
				attribute2: null,
				attribute3: null,
				attribute4: null,
				attribute5: null,
				attribute6: null,
				attribute7: null,
				attribute8: null,
				attribute9: null,
				attribute10: null,
				attribute11: null,
				attribute12: null,
				attribute13: null,
				attribute14: null,
				attribute15: null,
				attribute16: null,
				attribute17: null,
				attribute18: null,
				attribute19: null,
				attribute20: null,
				attribute21: null,
				attribute22: null,
				attribute23: null,
				attribute24: null,
				attribute25: null,
				attribute26: null,
				attribute27: null,
				attribute28: null,
				attribute29: null,
				attribute30: null,
				attribute31: null,
				attribute32: null,
				defaultCommision: null,
				realCommision: null,
				commisionPay: null,
				prodToprice: null,
				prodRealpay: null,
				prodPay: null,
			},
			rules: {},
			loading: false, //加载中提示框显示
			show: false, //搜索框显示
			finished: false, //加载更多完结
			// status: "more", // 显示底部提示
			loadText: {
				contentdown: "点击加载更多",
				contentrefresh: "正在加载",
				contentnomore: "没有更多数据了",
			},
		};
	},
	computed: {
		status() {
			if (this.DataList.length < this.total) {
				return "more";
			} else {
				this.finished = true;
				return "nomore";
			}
		},
	},
	onShow() {
		this.finished = false; //重置搜索完结
		this.queryParams.pageNum = 1; //重置搜索页
		this.DataList = []; //清空原结果集
		this.getList();
	},
	methods: {
		//条件搜索框
		handle_SearchBox_click() {
			this.show = true;
		},
		open() { },
		close() {
			this.show = false;
		},
		GetAddress(item) {
			const addressFields = [
				"taskProvince",
				"taskCity",
				"taskDistrict",
				"taskTown",
				"taskVillage",
				"taskStreet",
				"taskRegisterAdd",
			];
			const result = addressFields
				.filter((field) => item[field])
				.map((field) => item[field])
				.join("");
			return result;
		},
		MyonLoad(e) {
			// this.status = "loading";
			this.fetch();
			//固定返回
			e.detail = {
				status: "loading",
			};
			return e;
		},
		//条件搜索按钮点击
		handel_search_click() {
			this.finished = false; //重置搜索完结
			this.queryParams.pageNum = 1; //重置搜索页
			this.DataList = []; //清空原结果集
			this.getList();
			this.show = false; //关闭搜索框
		},
		//条件重置按钮点击
		//taskTypeName按照this.Mode转化，'GZSG'对应'设备安装';'SMFW'对应'家庭养老服务'
		handel_reset_click() {
			this.queryParams = {
				pageNum: 1,
				pageSize: 15,
				taskTypeName: '设备安装',
				...Object.fromEntries(Object.keys(this.queryParams).map((key) => [key, null])),
			};
			this.handel_search_click();
		},
		//跳转新增页
		handel_plus_click() {
			//this.$tab.navigateTo("/pages/GaiZaoShiGong/add");
		},
		//跳转改造施工明细页
		handel_cell_click(item) {
			console.log("item", item);
			this.$tab.navigateTo("/pages/GaiZaoShiGong/GZSG/index?id=" + item.name);
		},
		//扫码并跳转到老人项目页面-筛选
		handle_Scan_Click() {
			uni.scanCode({
				success: (res) => {
					console.log(res.result);
					this.queryParams.elderId = res.result;
					this.getList();
				},
				fail: function (res) {
					uni.showToast({
						icon: "none",
						title: "扫码失败，请检查设备或条码是否正常",
						duration: 5000,
					});
				},
			});
		},
		//加载更多合并结果
		fetch() {
			this.queryParams.pageNum = this.queryParams.pageNum + 1; //加载下一页
			listSlhgzresqjl(this.queryParams).then((response) => {
				if (response.code == 200) {
					// this.DataList = this.DataList.concat(response.rows);改为以id为key的合并
					this.DataList = this.DataList.concat(
						response.rows.filter((item) => !this.DataList.some((i) => i.id === item.id))
					);
					this.total = response.total;
				}
			});
		},
		getList() {
			this.loading = true;
			listSlhgzresqjl(this.queryParams).then((response) => {
				console.log("listSlhgzresqjl", response);
				if (response.code == 200) {
					this.DataList = response.rows;
					this.total = response.total;
				}
				this.loading = false;
			});
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../yangLaoAppStyle.scss";

.demo-uni-row {
	margin-bottom: 10px;
	/* QQ、字节小程序文档写有 :host，但实测不生效 */
	/* 百度小程序没有 :host，需要设置block */
	/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
	display: block;
	/* #endif */
}

/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
	margin-bottom: 10px;
}

/* #endif */

.demo-uni-col {
	height: 36px;
	border-radius: 4px;
}

.mypage-title {
	font-size: 20px;
	font-weight: 600;
	align-self: center;
}

.wrap {
	padding: 12px;
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}

.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}

.custom-style {
	width: 90%;
	font-weight: bolder;
	font-size: 15px;
}
</style>